<template>
    <div>
        <div v-if="stater">
            <div class="header_box">
                <div>
                    <van-icon class="icon" name="arrow-left" @click="back" />
                </div>
                <div name="center">商品详情</div>
                <div name="right" @click="bianji">编辑</div>
            </div>
            <div class="font-sm p-1 staterList">
                <div>
                    <div v-for="(item, key) in img" :key="key">
                        <div class="row j-sb font-mi">
                            <p>{{ key }}</p>
                            <img :src="item" alt="" />
                        </div>
                    </div>
                    <div v-for="(item, key) in shangping" :key="key">
                        <div class="row j-sb font-mi">
                            <p>{{ key }}</p>

                            <p class="text-muted">{{ item }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div v-else>
            <div class="header_box">
                <div>
                    <van-icon class="icon" name="arrow-left" @click="back" />
                </div>
                <div name="center">商品详情</div>
                <div name="right" @click="baocun">保存</div>
            </div>
            <div class="font-sm p-1">
                <div class="py-1">
                    <van-cell-group class="font-mi">
                        <van-row class="a-center d-flex">
                            <van-col span="8"> <p>图片</p></van-col>
                            <van-col span="16"> <van-uploader v-model="fileList" multiple /></van-col>
                        </van-row>
                    </van-cell-group>
                    <div class="row j-sb font-mi"></div>
                </div>
                <div>
                    <van-cell-group class="font-mi">
                        <van-row class="a-center d-flex">
                            <van-col span="8"> <div>中文说明</div></van-col>
                            <van-col span="16"
                                ><van-field
                                    v-model="value[0]"
                                    placeholder="请输入用户名"
                                    class="bg-light-secondary rounded"
                            /></van-col>
                        </van-row>
                    </van-cell-group>
                </div>
                <div class="py-1">
                    <van-cell-group class="font-mi">
                        <van-row class="a-center d-flex">
                            <van-col span="8"> <div>英文名称</div></van-col>
                            <van-col span="16"
                                ><van-field
                                    v-model="value[1]"
                                    placeholder="请输入用户名"
                                    class="bg-light-secondary rounded"
                            /></van-col>
                        </van-row>
                    </van-cell-group>
                </div>
                <div class="py-1">
                    <van-cell-group class="font-mi">
                        <van-row class="a-center d-flex">
                            <van-col span="8"> <div>商品分类 *</div></van-col>
                            <van-col span="16"
                                ><van-field
                                    v-model="value[2]"
                                    placeholder="请输入用户名"
                                    class="bg-light-secondary rounded"
                            /></van-col>
                        </van-row>
                    </van-cell-group>
                </div>
                <div class="py-1">
                    <van-cell-group class="font-mi">
                        <van-row class="a-center d-flex">
                            <van-col span="8"> <div>商品编号</div></van-col>
                            <van-col span="16"
                                ><van-field
                                    v-model="value[3]"
                                    placeholder="请输入用户名"
                                    class="bg-light-secondary rounded"
                            /></van-col>
                        </van-row>
                    </van-cell-group>
                </div>
                <div class="py-1">
                    <van-cell-group class="font-mi">
                        <van-row class="a-center d-flex">
                            <van-col span="8"> <div>过期日期</div></van-col>
                            <van-col span="16"
                                ><van-field
                                    v-model="value[26]"
                                    placeholder="请输入用户名"
                                    class="bg-light-secondary rounded"
                            /></van-col>
                        </van-row>
                    </van-cell-group>
                </div>
                <div class="py-1">
                    <van-cell-group class="font-mi">
                        <van-row class="a-center d-flex">
                            <van-col span="8"> <div>单点不配送</div></van-col>
                            <van-col span="16"
                                ><van-field
                                    v-model="value[4]"
                                    placeholder="请输入用户名"
                                    class="bg-light-secondary rounded"
                            /></van-col>
                        </van-row>
                    </van-cell-group>
                </div>
                <div class="py-1">
                    <van-cell-group class="font-mi">
                        <van-row class="a-center d-flex">
                            <van-col span="8"> <div>商品类型</div></van-col>
                            <van-col span="16"
                                ><van-field
                                    v-model="value[6]"
                                    placeholder="请输入用户名"
                                    class="bg-light-secondary rounded"
                            /></van-col>
                        </van-row>
                    </van-cell-group>
                </div>
                <div class="py-1">
                    <van-cell-group class="font-mi">
                        <van-row class="a-center d-flex">
                            <van-col span="8"> <div>中文描述</div></van-col>
                            <van-col span="16"
                                ><van-field
                                    v-model="value[7]"
                                    placeholder="请输入用户名"
                                    class="bg-light-secondary rounded"
                            /></van-col>
                        </van-row>
                    </van-cell-group>
                </div>
                <div class="py-1">
                    <van-cell-group class="font-mi">
                        <van-row class="a-center d-flex">
                            <van-col span="8"> <div>英文描述</div></van-col>
                            <van-col span="16"
                                ><van-field
                                    rows="2"
                                    autosize
                                    v-model="value[8]"
                                    placeholder="请输入用户名"
                                    class="bg-light-secondary rounded"
                            /></van-col>
                        </van-row>
                    </van-cell-group>
                </div>
                <div class="py-1">
                    <van-cell-group class="font-mi">
                        <van-row class="a-center d-flex">
                            <van-col span="8"> <div>中文主料</div></van-col>
                            <van-col span="16"
                                ><van-field
                                    rows="2"
                                    autosize
                                    v-model="value[9]"
                                    placeholder="请输入用户名"
                                    class="bg-light-secondary rounded"
                            /></van-col>
                        </van-row>
                    </van-cell-group>
                </div>
                <div class="py-1">
                    <van-cell-group class="font-mi">
                        <van-row class="a-center d-flex">
                            <van-col span="8"> <div>英文主料</div></van-col>
                            <van-col span="16"
                                ><van-field
                                    rows="2"
                                    autosize
                                    v-model="value[10]"
                                    placeholder="请输入用户名"
                                    class="bg-light-secondary rounded"
                            /></van-col>
                        </van-row>
                    </van-cell-group>
                </div>
                <div class="py-1">
                    <van-cell-group class="font-mi">
                        <van-row class="a-center d-flex">
                            <van-col span="8"> <div>中文口味</div></van-col>
                            <van-col span="16"
                                ><van-field
                                    rows="2"
                                    autosize
                                    v-model="value[11]"
                                    placeholder="请输入用户名"
                                    class="bg-light-secondary rounded"
                            /></van-col>
                        </van-row>
                    </van-cell-group>
                </div>
                <div class="py-1">
                    <van-cell-group class="font-mi">
                        <van-row class="a-center d-flex">
                            <van-col span="8"> <div>英文口味</div></van-col>
                            <van-col span="16"
                                ><van-field
                                    rows="2"
                                    autosize
                                    v-model="value[12]"
                                    placeholder="请输入用户名"
                                    class="bg-light-secondary rounded"
                            /></van-col>
                        </van-row>
                    </van-cell-group>
                </div>
                <div class="py-1">
                    <van-cell-group class="font-mi">
                        <van-row class="a-center d-flex">
                            <van-col span="8"> <div>制作时长</div></van-col>
                            <van-col span="16"
                                ><van-field
                                    rows="2"
                                    autosize
                                    v-model="value[13]"
                                    placeholder="请输入用户名"
                                    class="bg-light-secondary rounded"
                            /></van-col>
                        </van-row>
                    </van-cell-group>
                </div>
                <!-- 商品规格 暂时不写 -->
                <div class="py-1">
                    <van-cell-group class="font-mi">
                        <van-row class="a-center d-flex">
                            <van-col span="8"> <div>打包费</div></van-col>
                            <van-col span="16"
                                ><van-field
                                    rows="2"
                                    autosize
                                    v-model="value[15]"
                                    placeholder="请输入用户名"
                                    class="bg-light-secondary rounded"
                            /></van-col>
                        </van-row>
                    </van-cell-group>
                </div>
                <div class="py-1">
                    <van-cell-group class="font-mi">
                        <van-row class="a-center d-flex">
                            <van-col span="8"> <div>是否限时开售</div></van-col>
                            <van-col span="16"
                                ><van-field
                                    rows="2"
                                    autosize
                                    v-model="value[17]"
                                    placeholder="请输入用户名"
                                    class="bg-light-secondary rounded"
                            /></van-col>
                        </van-row>
                    </van-cell-group>
                </div>
                <div class="py-1">
                    <van-cell-group class="font-mi">
                        <van-row class="a-center d-flex">
                            <van-col span="8"> <div>每日开售时段</div></van-col>
                            <van-col span="16"
                                ><van-field
                                    rows="2"
                                    autosize
                                    v-model="value[18]"
                                    placeholder="请输入用户名"
                                    class="bg-light-secondary rounded"
                            /></van-col>
                        </van-row>
                    </van-cell-group>
                </div>
                <div class="py-1">
                    <van-cell-group class="font-mi">
                        <van-row class="a-center d-flex">
                            <van-col span="8"> <div>是否限量供应</div></van-col>
                            <van-col span="16"
                                ><van-field
                                    rows="2"
                                    autosize
                                    v-model="value[19]"
                                    placeholder="请输入用户名"
                                    class="bg-light-secondary rounded"
                            /></van-col>
                        </van-row>
                    </van-cell-group>
                </div>
                <div class="py-1">
                    <van-cell-group class="font-mi">
                        <van-row class="a-center d-flex">
                            <van-col span="8"> <div>每日供应量</div></van-col>
                            <van-col span="16"
                                ><van-field
                                    rows="2"
                                    autosize
                                    v-model="value[20]"
                                    placeholder="请输入用户名"
                                    class="bg-light-secondary rounded"
                            /></van-col>
                        </van-row>
                    </van-cell-group>
                </div>
                <div class="py-1">
                    <van-cell-group class="font-mi">
                        <van-row class="a-center d-flex">
                            <van-col span="8"> <div>是否新品</div></van-col>
                            <van-col span="16"
                                ><van-field
                                    rows="2"
                                    autosize
                                    v-model="value[22]"
                                    placeholder="请输入用户名"
                                    class="bg-light-secondary rounded"
                            /></van-col>
                        </van-row>
                    </van-cell-group>
                </div>
                <div class="py-1">
                    <van-cell-group class="font-mi">
                        <van-row class="a-center d-flex">
                            <van-col span="8"> <div>是否招牌菜</div></van-col>
                            <van-col span="16"
                                ><van-field
                                    rows="2"
                                    autosize
                                    v-model="value[23]"
                                    placeholder="请输入用户名"
                                    class="bg-light-secondary rounded"
                            /></van-col>
                        </van-row>
                    </van-cell-group>
                </div>
                <div class="py-1">
                    <van-cell-group class="font-mi">
                        <van-row class="a-center d-flex">
                            <van-col span="8"> <div>是否促销</div></van-col>
                            <van-col span="16"
                                ><van-field
                                    rows="2"
                                    autosize
                                    v-model="value[24]"
                                    placeholder="请输入用户名"
                                    class="bg-light-secondary rounded"
                            /></van-col>
                        </van-row>
                    </van-cell-group>
                </div>
                <div class="py-1">
                    <van-cell-group class="font-mi">
                        <van-row class="a-center d-flex">
                            <van-col span="8"> <div>促销折扣</div></van-col>
                            <van-col span="16"
                                ><van-field
                                    rows="2"
                                    autosize
                                    v-model="value[25]"
                                    placeholder="请输入用户名"
                                    class="bg-light-secondary rounded"
                            /></van-col>
                        </van-row>
                    </van-cell-group>
                </div>
                <div class="py-1">
                    <van-cell-group class="font-mi">
                        <van-row class="a-center d-flex">
                            <van-col span="8"> <div>生效日期</div></van-col>
                            <van-col span="16"
                                ><van-field
                                    rows="2"
                                    autosize
                                    v-model="value[26]"
                                    placeholder="请输入用户名"
                                    class="bg-light-secondary rounded"
                            /></van-col>
                        </van-row>
                    </van-cell-group>
                </div>
                <div class="py-1">
                    <van-cell-group class="font-mi">
                        <van-row class="a-center d-flex">
                            <van-col span="8"> <div>每人每天限购</div></van-col>
                            <van-col span="16"
                                ><van-field
                                    rows="2"
                                    autosize
                                    v-model="value[27]"
                                    placeholder="请输入用户名"
                                    class="bg-light-secondary rounded"
                            /></van-col>
                        </van-row>
                    </van-cell-group>
                </div>
                <div class="py-1">
                    <van-cell-group class="font-mi">
                        <van-row class="a-center d-flex">
                            <van-col span="8"> <div>促销时段</div></van-col>
                            <van-col span="16"
                                ><van-field
                                    rows="2"
                                    autosize
                                    v-model="value[28]"
                                    placeholder="请输入用户名"
                                    class="bg-light-secondary rounded"
                            /></van-col>
                        </van-row>
                    </van-cell-group>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant'
import { mapMutations, mapState } from 'vuex'
import { outSuccess } from '@/https/Commit'

export default {
    data() {
        return {
            img: {
                基本信息: '',
                图片: 'https://cdn3.axureshop.com/demo/1525603/images/%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85_%E5%8D%95%E5%93%81/u1737.png'
            },
            shangping: {
                中文说明: '河村石磨肠粉',
                英文名称: 'Ho Tsuen chang-fen',
                商品分类: '石磨肠粉',
                商品编号: 'A01',
                单点不配送: '否',
                商品描述: '',
                商品类型: '单品',
                中文描述: '广东河村地方特色早餐小吃',
                英文描述: 'Guangdong special breakfast snacks',
                中文主料: '大米',
                英文主料: 'Rice',
                中文口味: '清淡',
                英文口味: 'Mild',
                制作时长: '5 min',
                规格属性: '',
                打包费: '0 P/份',
                限时限量: '',
                是否限时开售: '是',
                每日开售时间: '11:00－13:00',
                是否限量供应: '是',
                每日供应量: '10 份',
                新品促销: '',
                是否新品: '是',
                是否招牌菜: '否',
                是否促销: '是',
                促销折扣: '90%',
                生效日期: '2021-11-01 至 2021-11-30',
                每人每天限购: '1 份',
                促销时段: '全天'
            },
            stater: true,
            fileList: [
                // Uploader 根据文件后缀来判断是否为图片文件
                // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
                {
                    url: 'https://cdn3.axureshop.com/demo/1525603/images/%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85_%E5%8D%95%E5%93%81/u1737.png',
                    isImage: true
                }
            ],
            value: [],
            show: false,
            data: ''
        }
    },
    created() {
        console.log(this.$route.query)
        this.data = this.$store.state.CommAdd.AddCommodity[0]
        console.log(this.data)
    },
    methods: {
        ...mapState(['CommAdd/AddCommodity']),
        back() {
            this.$router.go(-1)
        },
        bianji() {
            this.stater = false

            this.value = Object.values(this.shangping) //对象转化为数组
            console.log(this.value)
        },
        afterRead(file) {
            // 此时可以自行将文件上传至服务器
            console.log(file)
        },
        ...mapMutations(['CommAdd/AddXqCommodity']),
        baocun() {
            if (this.value == '') {
                Toast.success('请确认填写的内容')
            } else {
                Toast.success('修改成功')

                outSuccess(this.value)
                    .then((res) => {
                        console.log(res)
                        console.log(this.value)
                        this['CommAdd/AddXqCommodity'](this.value)
                        this.$router.push('/CommodityMan')
                    })
                    .catch((err) => {
                        console.log(err)
                    })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.header_box {
    width: 100%;
    background-color: rgba(255, 110, 83, 1);
    display: flex;
    align-items: center;
    height: 50px;
    font-size: 16px;
    color: aliceblue;
    position: relative;
    justify-content: space-around;
}
.icon {
    left: 10px;
}
.staterList > div {
    padding: 10px 0px;
}
</style>
